<template>
	<view class="login">
		<u-navbar placeholder>
			<view slot="left" class="back">
				<u-icon @click="toHome()" name="arrow-left"></u-icon>
			</view>
		</u-navbar>
		<view class="languageUpdate">
			<languageUpdate color="#ED762F" />
		</view>
		<div class="login-pic">
			<image src="../../static/login/user-pic@3x.png" mode="aspectFit"></image>
		</div>
		<view class="login-content">
			<div class="login-username">
				<image src='../../static/login/userNameLogin@3x.png'></image>
				<u--input :placeholder="$t('page.login.userNamePlaceholder')" border="surround"
					v-model="loginForm.account"></u--input>
			</div>
			<div class="login-password">
				<image src='../../static/login/userPasswordLogin@3x.png'></image>
				<u--input type="password" :placeholder="$t('page.login.userPasswordPlaceholder')" border="surround"
					v-model="loginForm.pass"></u--input>
			</div>
			<u-button type="primary" @click="Login()" :text="$t('page.login.signInNow')" shape="circle" color="#ED762F"
				size="large"></u-button>
			<view class="login-bottom">
				<text @click="toForgotPassword">{{ $t('page.login.forgotPasswordBtn') }}</text>
				<text @click="toRegister">{{ $t('page.login.registerNow') }}</text>
				<!-- <text>{{ $t('page.login.secretFreeLogin') }}</text> -->
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import languageUpdate from '@/components/base/languageUpdate.vue'
	export default {
		components : { languageUpdate },
		data() {
			return {
				loginForm: {
					account: "",
					pass: ""
				},
				show: true
			}
		},
		created() {

		},
		methods: {
			Login() { //登录
				if (this.loginForm.account.trim() === '') return uni.$u.toast(this.$t('page.login.account-message'))
				if (this.loginForm.pass.trim() === '') return uni.$u.toast(this.$t('page.login.pass-message'))
				this.request('login', {}, this.loginForm).then(res => {
					if (res.code === 200 && res.result) {
						localStorage.setItem('token', res.result.token)
						localStorage.setItem('uid', res.result.userInfo.id)
						localStorage.setItem('money', res.result.userInfo.money || 0)
						localStorage.setItem('account', res.result.userInfo.account)
						uni.switchTab({
							url: '/pages/home/home'
						})
						uni.$u.toast(this.$t('success-operation'));
					}else if(res.code == 511){
						uni.$u.toast(res.message);
					}
				})
			},
			toForgotPassword() {
				uni.navigateTo({
					url: '/pages/login/contactCustomerService?title=' + this.$t('page.login.forgotPassword')
				})
			},
			toRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params
				})
			},
			toHome() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		height: 100vh;
		background: white;
		
		.languageUpdate{
			display: flex;
			width: 80%;
			margin: 0px auto;
			box-sizing: border-box;
			padding: 20px 0px;
			justify-content: flex-start;
		}

		.login-pic {
			height: 200px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 120px;
				height: 120px;
			}
		}

		.login-content {
			width: 80%;
			margin: 0px auto;

			.login-username,
			.login-password {
				border-bottom: 1px solid #ccc;
				display: flex;
				height: 40px;
				align-items: center;
				margin-bottom: 20px;

				image {
					width: 20px;
					height: 20px;
				}
			}

			.login-bottom {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0px 10px;
				margin-top: 15px;
				color: #C1C1C1;
			}
		}
	}
</style>